<template>
    <view class="content">
        <u-navbar :is-back="true" back-icon-color="#000" title="签到" :background="background" :border-bottom="false" title-color="#000" title-size="30">
            <view slot="right" style="padding-right: 20rpx;font-size: 30rpx;" @click="$gTo('/mine/pages/sign/sign-list')">
                签到记录
            </view>
        </u-navbar>
        
        <view class="item" v-for="(item,index) in list" :key='index'>
            <view class='item-top'>
                <image :src="item.image" class="del-09"></image>
                <view class="item-right">
                    <view class="name">{{item.name}}</view>
                    <view class="u-flex">
                        <!-- status 0未签到 1未答题 2，3已答题 -->
                        <view class="sub" v-if="item.status == 0">未签到</view>
                        <view class="sub2" v-if="item.status != 0">已签到</view>
                        <view></view>
                    </view>
                    <view class="u-flex">
                        <image src="../../static/icon/card_04.png" class="card-04"></image>
                        <view class="add">{{item.address}}</view>
                    </view>
                </view>
            </view>
            <view class="btns">
                <view></view>
                <view class="qd-btn" v-if="item.status == 0" @click="doSign(item)">立即签到</view>
                <view class="qd-btn" v-if="item.status == 1 && item.activity_id != 0" @click="doSign(item)">立即答题</view>
            </view>
        </view>
        <!-- <view style="text-align: center;padding: 50upx 0;color: #999;font-size: 24rpx;" v-if="list.length == 0">暂无相关信息</view> -->
        <view style="height: 94rpx;padding-top: 30rpx;">
            <u-loadmore :status="status" v-if="status != 'loadmore'" />
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                statusBar: 0,
                background: { backgroundColor: 'rgba(255,255,255,0)' },
                list: [], 
                status: 'loadmore', //是否显示没有更多了
                page: 1,
                latitude: '',
                longitude: '',
            }
        },
        onLoad(option) {
            let _this = this;
            //状态栏高度
            uni.getSystemInfo({
            	success: function(res) {
            		_this.statusBar = res.statusBarHeight;
            	}
            });
            // #ifdef APP-PLUS
            var galleryPermission = plus.navigator.checkPermission("LOCATION");
            if (galleryPermission == "undetermined") {
                this.$toast('位置权限使用说明：用于定位打卡');
            }
            // #endif
        },
        onShow() {
            if (this.latitude && this.longitude) {
                this.page = 1
                this.list = []
                this.status = 'loadmore'
                this.getList()
            } else {
                this.$getLocation((latitude,longitude) => {
                    this.latitude = latitude
                    this.longitude = longitude
                    this.page = 1
                    this.list = []
                    this.status = 'loadmore'
                    this.getList()
                })
            }
        },
        methods: {
            doSign(item) {
                if (item.status == 0) {
                    this.$ajax('sign_in', {
                    	user_token: this.$getSync('userToken'),
                        pro_id: item.pro_id,//签到楼盘id
                        longitude: this.longitude,//经度
                        latitude: this.latitude,//纬度
                    }).then(ret => {
                    	if (ret.success == 1000) {
                            this.page = 1
                            this.list = []
                            this.status = 'loadmore'
                            this.getList()
                            if (ret.detail.activity_id == 0) {
                                // activity_id = 0 楼盘没有添加活动
                                this.$toast('签到成功');
                            } else {
                                uni.showModal({
                                	title: '签到提醒',
                                	content: '是否开始答题？',
                                	success: (res) => {
                                		if (res.confirm) {
                                			this.$gTo('/mine/pages/question/question?data=' + JSON.stringify(ret.detail) + '&longitude=' + this.longitude + '&latitude=' + this.latitude)
                                		} else if (res.cancel) {
                                			
                                		}
                                	}
                                });
                            }
                    	} else {
                    		this.$toast(ret.msg);
                    	}
                    });
                } else {
                    this.$gTo('/mine/pages/question/question?data=' + JSON.stringify(item) + '&longitude=' + this.longitude + '&latitude=' + this.latitude)
                }
            },
            // 获取列表
            getList() {
            	if (this.status == 'nomore') return;
            	this.status = 'loading';
            	this.$ajax('user_sign_in', {
            		user_token: this.$getSync('userToken'),
            		page: this.page,
            		limit: 10,
                    type: 1,//1签到 2签到记录 3答题记录
                    longitude: this.longitude,//经度
                    latitude: this.latitude,//纬度
            	}).then(ret => {
            		if (ret.success == 1000) {
            			if (ret.detail && ret.detail.sign_in && ret.detail.sign_in.length > 0) {
            				this.list = this.list.concat(ret.detail.sign_in);
            				this.page++;
            				this.status = 'loadmore'
            			} else {
            				this.status = 'nomore'
            			}
            		} else {
            			this.$toast(ret.msg);
            		}
            	});
            },
            
            onPageScroll: function(e) {
            	//nvue暂不支持滚动监听，可用bindingx代替
            	// console.log("滚动距离为：" + e.scrollTop);
            	let a = e.scrollTop * 0.05;
            	if (a > 1) {
            		a = 1;
            	}
            	if (e.scrollTop == 0) {
            		this.background.backgroundColor = 'rgba(255,255,255,0)';
            	} else {
            		this.background.backgroundColor = 'rgba(255,255,255,' + a + ')';
            	}
            },
        },
    }
</script>

<style lang="scss">
    page {
        background: #f5f5f5;
    }
    .content{
        padding: 20rpx;
    }
    .item{
        background-color: #fff;
        border-radius: 20rpx;
        padding: 20rpx;
        margin-bottom: 20rpx;
    }
    .item-top{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .del-09{
        width: 213rpx;
        height: 158rpx;
        border-radius: 10rpx;
        margin-right: 20rpx;
    }
    .item-right{
        flex: 1;
    }
    .name{
        width: 425rpx;
        font-size: 32rpx;
        font-weight: bold;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .sub{
        font-size: 24rpx;
        line-height: 1;
        padding: 5rpx 13rpx;
        border-radius: 5rpx;
        color: #5f8fbe;
        border: 2rpx solid #5f8fbe;
        margin: 10rpx 0;
    }
    .sub2{
        font-size: 24rpx;
        line-height: 1;
        padding: 5rpx 13rpx;
        border-radius: 5rpx;
        color: #ef4034;
        border: 2rpx solid #ef4034;
        margin: 10rpx 0;
    }
    .card-04{
        width: 20rpx;
        height: 24rpx;
        margin-right: 10rpx;
    }
    .add{
        flex: 1;
        font-size: 24rpx;
        color: #8e939c;
    }
    .btns{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 7rpx;
    }
    .qd-btn{
        font-size: 26rpx;
        color: #fff;
        padding: 15rpx 30rpx;
        background-color: #00a1e9;
        border-radius: 50rpx;
    }
    
    
    
</style>

